import 'package:easy_refresh/easy_refresh.dart';
import 'package:flutter/material.dart';
import 'package:flutter_swiper_null_safety/flutter_swiper_null_safety.dart';
import 'package:get/get.dart';
import 'package:wan_android_flutter/common/base/base_page.dart';
import 'package:wan_android_flutter/common/resources/text_styles.dart';
import 'package:wan_android_flutter/res/assets_res.dart';

import '../../../common/network/model/categorys_model.dart';
import '../../../common/resources/spacing.dart';
import '../../../common/routes/route_manager.dart';
import '../../common_web/common_web_state.dart';
import 'home_logic.dart';

class HomePage extends BasePage<HomeLogic> {
  HomePage({super.key});

  @override
  bool showAppBar() {
    return false;
  }

  @override
  Widget buildContent(BuildContext context) {
    return EasyRefresh(
        controller: logic.controller,
        onRefresh: () {
          logic.state.pageIndex = 0;
          logic.loadCategorys();
        },
        onLoad: () {
          logic.state.pageIndex += 1;
          logic.loadCategorys();
        },
        child: Obx(() {
          return CustomScrollView(
            shrinkWrap: true,
            slivers: [
              SliverToBoxAdapter(
                  child: SizedBox(
                height: 220,
                child: Swiper(
                  key: UniqueKey(),
                  itemCount: logic.state.banners.length,
                  autoplay: true,
                  itemBuilder: (BuildContext context, int index) {
                    return Image.network(
                      logic.state.banners[index].imagePath ?? "",
                      fit: BoxFit.cover,
                    );
                  },
                  pagination: const SwiperPagination(),
                  scrollDirection: Axis.horizontal,
                ),
              )),
              SliverList.builder(
                itemBuilder: (context, index) {
                  return _buildItem(logic.state.categorys[index], index);
                },
                itemCount: logic.state.categorys.length,
              )
            ],
          );
        }));
  }

  Widget _buildItem(Category category, int index) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          padding: const EdgeInsets.all(16),
          color: colorData.bgWhite,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Image.asset(
                    AssetsRes.IC_LAUNCHER_ROUND,
                    width: 25,
                    height: 25,
                  ),
                  Text(
                    category.niceDate ?? "",
                    style: colorData.textGray.s14.regular,
                  )
                ],
              ),
              Spacing.vSpacing8,
              InkWell(
                onTap: () {
                  CommonBrowserParam commonBrowserParam = CommonBrowserParam(
                    title: category.title ?? "",
                    url: category.link ?? "",
                  );
                  Get.toNamed(RouteManager.commonWebPage, arguments: commonBrowserParam);
                },
                child: Text(
                  category.title ?? "",
                  style: colorData.textBlack.s20.regular,
                ),
              ),
              Spacing.vSpacing8,
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  InkWell(
                    onTap: () {
                      Get.toNamed(RouteManager.tutorialPage, arguments: category);
                    },
                    child: Text(
                      category.chapterName ?? "",
                      style: colorData.textBlue.s14.regular,
                    ),
                  ),
                  Image.asset(
                    AssetsRes.HEART,
                    width: 25,
                    height: 25,
                  )
                ],
              ),
            ],
          ),
        ),
        Container(
          height: 16.0,
          color: colorData.bgDivider,
        ),
      ],
    );
  }
}
